<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/common/taglibs.jsp"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
	<script type="text/javascript" src="${ctx}/res/js/groupManagement/groupList.js"></script>

	<style type="text/css">
		.divToolbar {
			line-height: 30px;
			text-align: left;
			width: 300px;
			margin-top: 30px;
			margin-bottom: 5px;
		}
		
		.divButton {
			margin: 0 2px 0 2px;
			padding: 1px 1px 1px 1px;
			min-width: 65px;
		}
		
		.groupDiv {
			background-color: #ffffff;
			height: 450px;
			overflow: auto;
		}
		
		.chooseGroup {
			line-height: 25px;
			margin-bottom: 2px;
			cursor: pointer;
			font-size: 17px;
			background-color: #2daeda;
			line-height: 30px;
			padding-left: 5px;
		}
	</style>

</head>
<body>
	<table>
		<tr>
			<td style="vertical-align: top;">				 
				<div class="list_toolbar divToolbar">
					<div class="toolButton divButton" onclick="addGroup();">新建</div>
					<div class="toolButton divButton" onclick="updateGroup();">修改</div>
					<div class="toolButton divButton" onclick="deleteGroup();">删除</div>
				</div>	
				<div id="groupDiv" class="groupDiv">
				</div>
			</td>
			
			<td style="vertical-align: top;">
				<table id="userListTable">
					<!-- 按钮操作区域 -->
					<tr>
						<td>
							<div class="list_toolbar">
								<div class="toolButton" onclick="newUser()">增加</div>
								<div id="deleteUser" class="toolButton">删除</div>
							</div>
						</td>
					</tr>

					<tr>
						<td>
							<table class="list_grid">
								<thead>
									<tr>
										<th>USERNAME</th>
										<th>CN_NAME</th>
										<th>DEPT_NAME</th>
										<th style="width: 1px;"></th>
									</tr>
								</thead>
							</table>
						</td>
					</tr>

					<tr>
						<td>
							<div class="list_scrollControlDiv" style="height: 342px;">
								<table class="list_grid" style="border-spacing: 0;">
									<tbody id="tBodyList" class="userItem">	
										<tr><td style="text-align:center;">&nbsp;</td></tr>									 
									</tbody>
								</table>
							</div>
						</td>
					</tr>
					<!-- 分页控件区域 -->
					<tr>
						<td>
							<div id="pagination" class="pagination"></div>
						</td>
					</tr>
				</table>
				
				<!-- 2. Show that div for create or update group -->
				<div id="groupInfoDiv" class="form_data" style="width: 993px;height:520px;display:none;">
					<form id="groupForm" style="padding-top:17%;">		 
						<center>
							<table>
								<tbody>
									<tr>
										<td class="td_for_label">
											GROUP_NAME<span style="color:red">*</span> 
										</td>
										<td class="td_for_input">
											<input type="text" id="groupName"  name="groupName" placeholder="请输入GROUP_NAME" required value="">
										</td>
									</tr>
									
									<tr>
										<td class="td_for_label">
											GROUP_DESC<span style="color: red">*</span>
										</td>
										<td class="td_for_input">
											<input type="text" id="groupDesc" name="groupDesc" placeholder="请输入GROUP_DESC" required value="">
										</td>
									</tr>
									<tr>
										<td style="text-align:center;padding:10px;" colspan="2">
											<div id="btnSubmit" class="toolButton" >确定</div>
											<div id="btnCancel" class="toolButton" onclick="cancelGroup();">取消</div>
										</td>
									</tr>
								</tbody>
							</table>
						</center>
					</form>
				</div>
			</td>
		</tr>
	</table>
</body>
</html>